<template>
	<view class="page">
		<view class="padding-24">
			<view class="fu-fs32 text-bold text-333 margin-bottom-24">{{title}}</view>
			<jyf-parser :html="body"></jyf-parser>
			
			<view class="margin-top-24">
				<view class="flex align-center" style="padding: 16rpx 0;">
					<text class="flex-shrink fu-fs28" >姓名：</text>
					<input class="ipt flex-sub" v-model="name" placeholder="请输入姓名" placeholder-class="text-999" />
				</view>
				<view class="flex align-center" style="padding: 16rpx 0;">
					<text class="flex-shrink fu-fs28">电话：</text>
					<input class="ipt flex-sub" v-model="mobile" placeholder="请输入手机号" placeholder-class="text-999" maxlength="11" />
				</view>
				<view class="flex align-center" style="padding: 16rpx 0;">
					<text class="flex-shrink fu-fs28">备注：</text>
					<textarea class="textare flex-sub" v-model="remark" placeholder="请填写备注" placeholder-class="text-999" />
				</view>
				
				<view class="btn" @click="submit">立即提交</view>
			</view>
		</view>
	</view>
</template>

<script>
import { validate } from "@/common/utils/index";
export default {
	data() {
		return {
			body: {},
			title: '',
			name: '',
			mobile: '',
			remark: ''
		}
	},
	onLoad() {
		this.getInfo()
	},
	methods: {
		getInfo() {
			this.$api.post(global.apiUrls.post5d63befcb25d9, {
				category_id: 26
			}).then(res => {
				this.title = res.data.data.name;
				this.body = res.data.data.content
			})
		},
		submit() {
			if (!this.name) {
				this.$message.info('请输入姓名')
				return
			}
			if (!this.mobile) {
				this.$message.info('请输入手机号')
				return
			}
			if (!validate(this.mobile, 'phone')) {
				this.$message.info('请输入正确的手机号')
				return
			}
			this.$api.post(global.apiUrls.post6440f5c043d8c, {
				name: this.name,
				tel: this.mobile,
				remark: this.remark
			}).then(res => {
				if (res.data.code == 1) {
					this.$message.info('提交成功')
					this.name = ''
					this.mobile = ''
					this.remark = ''
				} else {
					this.$message.info(res.data.msg)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background-color: #fff;
}
.ipt {
	border: 1rpx solid #eee;
	padding: 0 24rpx;
	height: 72rpx;
	line-height: 72rpx;
	border-radius: 8rpx;
}
.textare {
	border: 1rpx solid #eee;
	border-radius: 8rpx;
	padding: 24rpx;
	height: 200rpx;
}
.btn {
	width: 588rpx;
	height: 88rpx;
	text-align: center;
	line-height: 88rpx;
	border-radius: 50rpx;
	background-color: #FF6F27;
	margin: 0 auto;
	color: #fff;
	margin-top: 40rpx;
}
</style>
